<template>
	<view class="feedback-page">
		<view class="nav-bar">
			<view class="back-btn" @click="goBack">←</view>
			<view class="page-title">意见反馈</view>
		</view>

		<view class="main-container">

			<view class="form-item">
				<view class="label">选择问题类型 <text class="required">*</text></view>
				<view class="type-buttons">
					<button class="type-btn" :class="{ active: selectedType === '投诉用户' }"
						@click="selectedType = '投诉用户'">投诉用户</button>
					<button class="type-btn" :class="{ active: selectedType === '功能异常' }"
						@click="selectedType = '功能异常'">功能异常</button>
					<button class="type-btn" :class="{ active: selectedType === '体验问题' }"
						@click="selectedType = '体验问题'">体验问题</button>
					<button class="type-btn" :class="{ active: selectedType === '新功能建议' }"
						@click="selectedType = '新功能建议'">功能建议</button>
					<button class="type-btn" :class="{ active: selectedType === '其他' }"
						@click="selectedType = '其他'">其他</button>
				</view>
			</view>

			<view class="form-item">
				<view class="label">问题描述 <text class="required">*</text></view>
				<view class="textAreaBox">
					<textarea class="desc-input" v-model="descContent" placeholder="请输入问题描述" maxlength="500"></textarea>
				</view>
				
				<view class="word-count">({{ descContent.length }}/500)</view>
				<view class="label">上传图片 <text class="required">*</text></view>
				<view class="upload-area">
					<view class="upload-item" v-for="(img, index) in uploadImgs" :key="index">
						<image :src="img" class="upload-img"></image>
						<view class="del-img" @click="deleteImg(index)">×</view>
					</view>
					<button class="upload-btn" @click="chooseImage">
						<image src="/static/icons/camera.png" class="camera-icon"></image>
					</button>
				</view>
				<view class="upload-tip">上传问题截图可以让问题快速解决哦！</view>
			</view>

			<button class="submit-btn" @click="submitFeedback">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedType: '',
				descContent: '',
				uploadImgs: [],
			};
		},
		methods: {
			goBack() {
				uni.navigateTo({
					url:"/pages/regularUser/goto/my/my"
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 3 - this.uploadImgs.length,
					success: (res) => {
						this.uploadImgs = [...this.uploadImgs, ...res.tempFilePaths];
					}
				});
			},

			deleteImg(index) {
				this.uploadImgs.splice(index, 1);
			},

			submitFeedback() {
				if (!this.selectedType) {
					uni.showToast({
						title: '请选择问题类型',
						icon: 'none'
					});
					return;
				}
				if (!this.descContent.trim()) {
					uni.showToast({
						title: '请填写问题描述',
						icon: 'none'
					});
					return;
				}

				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				this.selectedType = '';
				this.descContent = '';
				this.uploadImgs = [];
				//navigator:{url=""}
			}
		}
	};
</script>

<style scoped>
	.feedback-page {
		background-color: #fff8f0;
		min-height: 100vh;
	}

	.nav-bar {
		height: 90px;
		background-color: #fff8f0;
		display: flex;
		align-items: center;
		padding: 0 15px;
		border-bottom: 1px solid #ffd5b8;
	}

	.back-btn {
		font-size: 20px;
		color: #ff7d00;
	}

	.page-title {
		font-size: 18px;
		font-weight: 600;
		color: #ff7d00;
		margin-left: 10px;
	}

	.main-container {
		padding: 15px;
	}

	.sub-title {
		font-size: 14px;
		color: #ff9a6c;
		margin-bottom: 15px;
	}

	.required {
		color: #ff4d4f;
	}

	.type-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.type-btn {
		padding: 8px 15px;
		border: 1px solid #ffd5b8;
		border-radius: 20px;
		background-color: #fff;
		color: #ff7d00;
		font-size: 14px;
		width: 100px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.type-btn.active {
		background-color: #ff7d00;
		color: #fff;
		border-color: #ff7d00;
	}

	.desc-input {
		width: 90vw;
		min-height: 80px;
		padding: 10px;
		border: 1px solid #ffd5b8;
		border-radius: 8px;
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
		background-color: white;
	}

	.word-count {
		font-size: 12px;
		color: #999;
		text-align: right;
	}

	.upload-area {
		display: flex;
		gap: 10px;
		width:92vw;
		
		margin: 15px 0 5px;
	}

	.upload-item {
		width: 70px;
		height: 70px;
		position: relative;
		border-radius: 8px;
		overflow: hidden;
	}
	.label{
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.upload-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.del-img {
		position: absolute;
		top: -5px;
		right: -5px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #ff4d4f;
		color: #fff;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}

	.upload-btn {
		width: 100vw;
		height: 70px;
		border: 1px dashed #ffd5b8;
		border-radius: 8px;
		background-color: #fff8f0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.camera-icon {
		width: 24px;
		height: 24px;
	}

	.upload-tip {
		font-size: 12px;
		color: #999;
	}

	.help-link {
		font-size: 12px;
		color: #999;
		text-align: center;
		margin: 10px 0 20px;
	}

	.link-text {
		color: #ff7d00;
		text-decoration: underline;
	}

	.submit-btn {
		width: 100%;
		padding: 14px 0;
		background-color: #ff7d00;
		color: #fff;
		border: none;
		border-radius: 12px;
		font-size: 16px;
		font-weight: 500;
		margin-top: 20px;
	}
		
	.textAreaBox{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>